<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户展示界面</title>
</head>
<style>
    td,
    tr,
    th {
        border: 1px solid;
    }

    /* .add {
        margin-left: 135px;
    } */
    #output {
        /* 绝顶定位 相对于当前浏览器 */
        position: fixed;
        background-color: darkgray;
        z-index: 0;
        width: 2000px;
        height: 2000px;
        /* 设置半透明 */
        opacity: 0.75;
        /* 初始化位置可让其浮动 */
        top: 0;
        left: 0;
    }

    #k {
        margin-bottom: 100px;
        margin-top: 36px;
        padding-left: 40px;
    }

    #overk {
        font-size: larger;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        border: 2px;
        border-style: outset;
        border-color: thistle;
        box-shadow: 5px 5px 5px 5px rgba(144, 93, 211, 0.705);
        background: linear-gradient(slateblue, cornflowerblue, pink, khaki);
        /* 绝顶定位 相对于当前浏览器 */
        position: fixed;
        /* 设置框框大小 */
        width: 20%;
        height: 30%;
        /* 设置div圆角 */
        border-radius: 7px;
        /* 初始化位置可让其浮动 */
        top: 0;
        left: 0;
        /* 设置框框在页面的位置 */
        margin-top: 200px;
        margin-left: 600px;
        /* z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 */
        z-index: 10000;
        /* 控制模态框显示 */
        /* visibility: hidden; */
    }

    label {
        font-size: larger;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: brown;
        border-style: groove;
        background: linear-gradient(pink, khaki);
    }
</style>

<body>
    <div id="app">
        <div>
            <input type="button" @click="addFun" value="添加" class="add">
            <input type="text" placeholder="请输入关键字" @input="search">
        </div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tr v-for="(item,index) of lists">
                <td>{{index+1}}</td>
                <td>{{item.username}}</td>
                <td>{{item.password}}</td>
                <td>
                    <input type="button" @click="upFun(index)" value="修改">
                    <input type="button" @click="delFun(index)" value="删除">
                </td>
                </tbody>
            </tr>
        </table>
        <!-- 简单模态框 -->
        <!-- 覆盖层 -->
        <div id="output" v-show="btnShow">
            <div id="overk">
                <!-- 模态框 -->
                <div id="k">
                    <form action="" id="add">
                        <label>用户添加、修改框</label><br>
                        <br>
                        姓名：<input type="text" v-model='name' ref="name" placeholder="请输入姓名"><br>
                        <br>
                        密码：<input type="text" v-model='pwd' ref="pwd" placeholder="请输入密码"><br>
                        <br>
                        <input type="button" @click="saveFun" value="保存">
                        <input type="button" @click="cancelFun" value="取消">
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            btnShow: false,
            name: '',
            pwd: '',
            lists: [],
            keyword: '',
            searchlist: '',
            indexNum: -1,
            list: [
                {
                    username: '爱探险的哆啦',
                    password: '1234567890'
                },
                {
                    username: '捣蛋鬼',
                    password: '1234567890'
                },
                {
                    username: '西伯利亚大尾巴狼',
                    password: '1234567890'
                },
                {
                    username: '芝士莓莓',
                    password: '1234567890'
                },
                {
                    username: '香草巧克力',
                    password: '1234567890'
                }
            ]
        },
        created() {// 生命周期函数
            this.setLists(this.list);
        },
        methods: {
            setLists(arr) {
                // JSON.parse()通常用于与服务端交换数据
                // 在接收服务器数据时一般是字符串
                // 使用JSON.stringify()方法处理以上数据，将其转换为字符串
                this.lists = JSON.parse(JSON.stringify(arr));
            },
            upFun: function (id) {
                this.indexNum = id;
                this.btnShow = true;
                console.log(this.indexNum);
                // 拿到要修改的对象
                let obj = this.list[id];
                console.log(obj);
                // 获取DOM
                // console.log(this.$refs.name);
                // console.log(this.$refs.pwd);
                // 给DOM赋值
                // this.$refs.name.value = obj.username;
                // this.$refs.pwd.value = obj.password;
                // console.log(this.$refs.name.value);
                // console.log(this.$refs.pwd.value);

                this.name = obj.username;
                this.pwd = obj.password;
            },
            addFun: function () {
                this.indexNum = -1;
                console.log(this.indexNum);
                this.name = ''
                this.pwd = ''
                this.btnShow = true;
            },
            saveFun: function () {
                let num = this.indexNum;
                console.log(num);
                if (num > -1) {

                    this.list[num].username = this.name;
                    this.list[num].password = this.pwd;

                    console.log(this.list[num].username);
                    console.log(this.list[num].password);

                    alert('保存成功！');
                    this.name = ''
                    this.pwd = ''
                    this.btnShow = false;
                    this.setLists(this.list)
                } else {
                    if (this.name != '' && this.pwd != '') {
                        console.log(this.name);
                        console.log(this.pwd);
                        let obj = {
                            username: this.name,
                            password: this.pwd
                        }
                        console.log(obj);
                        this.list.push(obj);
                        alert('保存成功！');
                        this.name = ''
                        this.pwd = ''
                        this.btnShow = false;
                        this.setLists(this.list)
                    } else {
                        alert('保存失败，名字、密码不能为空！')
                    }
                }
            },
            delFun: function (orderNum) {
                if (confirm('确定删除吗？')) {
                    console.log(orderNum);
                    this.lists.splice(orderNum, 1);
                } else {
                    console.log('取消了删除');
                }
            },
            cancelFun: function () {
                this.btnShow = false;
            },
            search: function (obj) {
                // obj.target拿到控件/获得DOM
                console.log('输入：' + obj.target.value);
                // 保证连续输入字符都能组合在一起形成完整字符串
                let keyword = obj.target.value;

                // console.log(this.list);
                // console.log(this.list[1]);
                // console.log(this.list[1].username);

                let searchlist = [];
                if (keyword != '') {
                    // 完全匹配才行
                    for (let i = 0; i < this.list.length; i++) {
                        if (this.list[i].username == keyword || this.list[i].password == keyword) {
                            // console.log('筛选结果：' + this.list[i]);
                            searchlist.push(this.list[i]);
                        }
                    }

                    // 想要达到的功能是：输入框输入内容，列表框能动态根据输入值显示输入值相关的列表，即模糊查询

                    // console.log('结果：' + searchlist);
                    this.setLists(searchlist)
                } else {
                    this.setLists(this.list);
                }
            }
        }
    })
</script>

</html>